Einstellungen zur mobilen Ansicht / Bildschirmgrößen

Olá!



Ich habe Fragen zum Template und dessen Responsivität.

1. Im Administrationsbereich kann ich unter den globalen Einstellungen wählen, ob ich keine mobile Ansicht wünsche, eine mobile Ansicht für Phones und eine für Tablets. Worin unterscheiden sich die Optionen Phone und Tablet voneinander? Ich erkenne keinen Unterschied bei Benutzung auf Handy/Tablet und möchte gerne mein Wissen erweitern
   
   
2. Das Template ist ja von Haus aus schon responsive. Kann man irgendwo die Responsivität für bestimmte Bildschirmgrößen selber festlegen, also quasi selbst „einprogrammieren“, und bestimmen, dass ab einer bestimmten Größe kein responsive mehr „benutzt“ wird? Wenn ja, wo und wie?

muito obrigado!

Frederico

Hallo Frederico

1. Der Unterschied sollte im "Breakpoint" sein. Also ab welchem Bildschirmbreite die Mobile Ansicht aktiviert wird.
Das kannste auch gut am Desktop-PC testen indem du die Breite des Browserfensters entsprechend kleiner machst. Beim Tablet triggerts dann früher, beim Phone erst bei nem kleineren Fenster.

2. Ja, Bootstrap bringt eine Grund-Responsivität mit sich. Du kannst mittles CSS Klassen ein wenig steuern was wo angezeigt wird (siehe getbootstrap.com/2.3.2/scaffolding.html#responsive bei "Responsive utility classes")
Die Triggerpunkte sind aber gegeben.

Für das responsive Verhalten zählt allein die Browserbreite. Allerdings zählen hierfür nicht die Pixel auf deinem Bildschirm, sondern vom Browser errechnete Werte, die sich nach der Bildschrimgröße richten.
Das Template übersetzt die Optionen Phone und Tablet in einen Pixelwert, wobei der von Tablet größer ist als der von Phone. Sobald die Breite des Browserfensters diesen Wert erreicht/unterschreitet, wird die mobile Ansicht aktiv. Dabei ist es egal, ob du dir die Seite auf einem Smartphone, Tablet, PC oder deinem Fernseher ansiehst.

Da Bootstrap einige wenige markante Bruchstellen nutzt, ist es sinvoll, diese auch für den Wechsel von mobil auf Desktop zu nutzen, da es sonst zu unerwünschten Nebenwirkungen kommen könnte.
Wenn du den Wert anpassen möchtest, müsstest du nach jedem Update Änderungen an den Dateien des Templates vornehmen. Hierfür gibt es verschiedene Wege. Du könntest die Button im Backend durch ein Textfeld ersetzen oder aber die Variable in github.com/Bakual/Allrounder/blob/master.../variables.less#L196 ändern (nicht so schön, da man sich so irgendwann womöglich wundert, warum die Option im Backend nicht funktioniert).

Hallo,

vielen Dank Ihnen beiden für die Antworten!
Ich habe folgende Media Queries gefunden, die ich gerne fest integrieren möchte: pastebin.com/7Pq5GUxr (Apple-Geräte)

Matthias schrieb: Wenn du den Wert anpassen möchtest, müsstest du nach jedem Update Änderungen an den Dateien des Templates vornehmen. Hierfür gibt es verschiedene Wege. Du könntest die Button im Backend durch ein Textfeld ersetzen oder aber die Variable in github.com/Bakual/Allrounder/blob/master.../variables.less#L196 ändern (nicht so schön, da man sich so irgendwann womöglich wundert, warum die Option im Backend nicht funktioniert).

Das mit dem Anpassen nach einem Update wäre nicht so schlimm für mich. Kann ich es so machen, dass diese Befehle von pastebin Anwendung finden, und wenn es andere Geräte sind, dass dann die „jetzigen“ Einstellungen greifen die von Haus aus schon dabei sind?

Wenn ja, wie? Und in welche Datei müsste ich diese Media Queries dann einfügen, damit es funktioniert?

Danke vielmals!

Du kannst das nicht abhängig von den Geräten machen. Macht auch keinen Sinn.
Man macht das abhängig von der Fensterbreite des Browsers, egal auf welchem Gerät. "Phone" und "Tablet" sind dabei nur Richtwerte um Anhaltspunkte zu haben von welcher Grösse man redet. Aber auch hier: Heute hat ein kleines Tablet welches man Hochformat hält eine ähnliche Breite wie ein grosses Handy das man quer hält.